<template>
  <div>
    <div>
      <div style="margin: 20px 0">
        <el-input
          type="textarea"
          :rows="3"
          v-model="uploadImg"
          @paste.native="handlePaste"
        ></el-input>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />

      <!-- <div>
        {{ archiveeId }}
        {{ tableData }}
      </div> -->
      <p></p>
      <p></p>

      <div v-for="(item, index) in tableData" :key="index" class="photo-item">
        <el-image :src="getUrl(item)" fit="cover" />
        <el-divider />
      </div>

      <!-- <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="名称" align="center" key="fileName" prop="fileName" />

        <el-table-column label="上传时间" align="center" key="ctime" prop="ctime" />
      </el-table> -->
    </div>
  </div>
</template>

<script>
import document from "./document.vue";
import { archiveeService } from "@/api/sysService";
export default {
  props: ["archiveeId"],
  components: {
    document,
  },
  data() {
    return {
      uploadImg: "",
      total: 0,
      // 用户表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        page: 1,
        size: 5,
      },
    };
  },

  created() {
    this.getList();
  },
  methods: {
    getUrl(item) {
      console.log("item", item);
      return "/api/api/upload/" + item.filePath;
    },
    handlePaste(event) {
      let file = (event.clipboardData || window.clipboardData).items[0];
      if (file.type.includes("image")) {
        let formdata = new FormData();
        formdata.append("file", file.getAsFile());
        formdata.append("archiveeId", this.archiveeId);
        formdata.append("otype", "img");

        archiveeService.postUploadPhoto(formdata, this.archiveeId).then((_) => {
          this.getList();
        });
      }
    },
    formattedFileSize(size = 0) {
      // let size = this.fileSize;
      if (size < 1024) {
        return `${size} B`;
      } else if (size < 1024 * 1024) {
        return `${(size / 1024).toFixed(2)} KB`;
      } else if (size < 1024 * 1024 * 1024) {
        return `${(size / (1024 * 1024)).toFixed(2)} MB`;
      } else {
        return `${(size / (1024 * 1024 * 1024)).toFixed(2)} GB`;
      }
    },
    // onUploadPhoto(obj) {
    //   let formdata = new FormData();
    //   formdata.append("file", obj.file);
    //   formdata.append("archiveeId", this.archiveeId);

    //   const loading = this.$loading({
    //     lock: true,
    //     text: "Loading",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });

    //   archiveeService
    //     .postUploadPhoto(formdata, this.archiveeId)
    //     .then((_) => {
    //       // this.refreshIt();
    //       this.getList();
    //       loading.close();
    //       this.$message({
    //         type: "success",
    //         message: "上传成功",
    //       });
    //     })
    //     .catch((_) => {
    //       loading.close();
    //     });
    // },
    getList() {
      archiveeService
        .listPhoto({ ...this.queryParams, archiveeId: this.archiveeId })
        .then((res) => {
          console.log(res);
          this.tableData = (res.data.data || []).map((el) => el.attachment || {});
          this.total = res.data.total;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.photo-item {
  display: block;
  margin: 30px;
  width: 90%;
  height: auto;
}
</style>
